<template>
  <div class="vp-raw">
    <OrgTree :tree-data="treeData">
      <template #default="{ toggleChildren, treeNodeData, loadChildrenData, parentNode }">
        <!-- <div
          v-loading="loadingNodeKey === treeNodeData.key"
          class="border-solid border-2 border-blue-500 rounded p-1"
          :class="{ spNode: treeNodeData.level > 1 }"
        >
          <div @click="() => onClickNodeTitle(treeNodeData)">{{ treeNodeData.level }}-{{ treeNodeData.title }}</div>
          <div v-if="treeNodeData.hasChildren" class="bg-red-100 text-center cursor-pointer">+</div>
        </div> -->
        <MyTreeNode :treeNodeData="treeNodeData" :parentNode="parentNode"></MyTreeNode>
      </template>
    </OrgTree>
  </div>
</template>

<script setup lang="ts">
import { OrgTreeNodeData } from './typing'
import OrgTree from './OrgTree.vue'
import MyTreeNode from './MyTreeNode.vue'
const treeData: OrgTreeNodeData[] = [
  {
    key: 1,
    title: 'xxx科技有有限公司',
    children: [
      {
        key: 2,
        title: '产品研发部',
        children: [
          {
            key: 3,
            title: '研发-前端',
          },
          {
            key: 4,
            title: '研发-后端',
          },
          {
            key: 5,
            title: 'UI 设计',
          },
        ],
      },
      {
        key: 6,
        title: '销售部',
        children: [
          {
            key: 7,
            title: '销售一部',
          },
          {
            key: 8,
            title: '销售二部',
          },
        ],
      },
      {
        key: 9,
        title: '财务部',
      },
    ],
  },
]
</script>

<style scoped lang="scss">
.border-solid {
  border-style: solid;
}
.border-2 {
  border-width: 2px;
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.rounded {
  border-radius: 0.25rem /* 4px */;
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
.text-center {
  text-align: center;
}
.cursor-pointer {
  cursor: pointer;
}
.spNode {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.flex-1 {
  flex: 1;
  height: 0;
}
.h-full {
  height: 100%;
}
</style>
